import './index.scss'
import { Card, Button, Checkbox, Form, Input } from 'antd'
import { LockOutlined, UserOutlined } from '@ant-design/icons'
import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import { fetchLogin } from '@/store/modules/userStore'

const Login = () => {
  const dispatch = useDispatch()
  const navigate = useNavigate()
  
  // 点击登录按钮时触发
  const onFinish = async formValue => {
    const res = await dispatch(fetchLogin(formValue))
    if (res) {
      navigate('/')
    }
  }
  return (
    <div className="login">
      <Card className="login-container">
        <div className='header'>博客系统欢迎您</div>
        {/* 登录表单 */}
        <Form
          onFinish={ onFinish }>
          <Form.Item
            name="adminname"
            rules={[
              {
                required: true,
                message: '请输入用户名',
              },
            ]}
          >
            <Input
                prefix={<UserOutlined/>} 
                placeholder="请输入用户名" 
                size="large"/>
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: '请输入密码',
              },
            ]}
            >
            <Input.Password
              prefix={<LockOutlined/>}
              type="password"
              placeholder="请输入密码"
              size="large"
            />
          </Form.Item>
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>记住我</Checkbox>
            </Form.Item>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button" size="large">
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default Login